<template>
	<div class="trouble-dispose">
		<component
			:is="formSlot"
			confirmText="提交"
			@onSubmit="onSubmit"
		>
			<h3>整改情况</h3>
			<van-field
				disabled
				v-model="troubleInfo.isHaveYh"
				:label="troubleInfo.checkName"
				placeholder="请选择"
			/>
			<van-field
				class="field-textarea field-column"
				disabled
				type="textarea"
				v-model="troubleInfo.checkSm"
				label="隐患描述"
				placeholder="请选择"
			/>
			<van-field
				class="field-column"
				label="隐患照片"
			>
				<template #input>
					<div class="images">
						<van-image
							v-for="(image, index) in troubleInfo?.checkZp?.split('|')"
							:key="index"
							:src="image"
							@click="onPreview(troubleInfo?.checkZp?.split('|'), index)"
						/>
					</div>
				</template>
			</van-field>
				<van-field
					class="field-column"
					v-model="formData.zgZt"
					label="隐患整改情况"
					placeholder="请选择"
					required
					:rules="validator.boolean"
				>
					<template #input>
						<van-radio-group v-model="formData.zgZt" direction="horizontal">
							<van-radio
								v-for="item in echoData.boolean"
								:name="item.value"
								:key="item.value"
							>
								{{ item.label }}
							</van-radio>
						</van-radio-group>
					</template>
				</van-field>
			<van-field
				v-if="+formData.zgZt === 1"
				class="field-column"
				label="整改图片"
				:rules="validator.image"
			>
				<template #input>
					<component
						:is="upload"
						v-model="formData.zgZp"
					/>
				</template>
			</van-field>
			<van-field
				v-model="formData.count"
				v-if="needInput.includes(troubleInfo?.checkId) && +formData.zgZt === 1"
				:label="echoData.zgCountEnum[troubleInfo?.checkId]"
				placeholder="请输入"
				required
				type="digit"
				:rules="validator.number"
			/>
		</component>
	</div>
</template>

<script setup>
import { ref, onMounted, reactive } from 'vue'
import { dangerInfo, dangerDispose } from '@/service/api'
import { useRoute, useRouter } from 'vue-router'
import formSlot from '@/components/formSlot'
import upload from '@/components/upload'
import { Dialog, ImagePreview } from 'vant'

const validateNumber = (val) =>
	new Promise((resolve) => {
		if (val && val >= 0) {
			resolve(true)
		} else {
			resolve(false)
		}
	})

const route = useRoute()
const router = useRouter()

const troubleInfo = ref({})
const formData = reactive({
	zgZt: '',
	zgZp: [],
	count: ''
})
const needInput = [
	'use_electric_bicycle',
	'use_bottled_liquefied_gas'
]
const echoData = {
	boolean: [
		{ label: '已整改', value: '1' },
		{ label: '未整改', value: '0' }
	],
	zgCountEnum: {
		use_electric_bicycle: '自行清理电动车数量(辆)',
		use_bottled_liquefied_gas: '自行清理液化石油气数量',
	}
}
const validator = {
	boolean: [{ required: true, message: '请选择' }],
	image: [{ required: true, message: '请上传图片' }],
	desc: [{ required: true, message: '请输入隐患描述' }],
	number: [
		{ required: true, message: '请输入' },
		{ validator: validateNumber, message: '请输入正数' }
	],
}


const onPreview = (images, index) => {
	ImagePreview({
		images,
		startPosition: index,
		closeable: true
	})
}

const getDetail = async () => {
	const result = await dangerInfo({
		id: route.query?.id
	})
	troubleInfo.value = result?.data
}

const onSubmit = () => {
	const params = {
		id: route.query.id,
		zgZt: formData.zgZt,
		zgZp: formData.zgZp?.map(item => {
			return item.url
		})?.join('|')
	}
	if (troubleInfo.value?.checkId === 'use_electric_bicycle') {
		params.zgDdcNum = +formData.count
	} else if (troubleInfo.value?.checkId === 'use_bottled_liquefied_gas') {
		params.zgYhsyqNum = +formData.count
	}
	Dialog.confirm({
		message: '确认提交？',
	}).then(() => {
		confirmSubmit(params)
	})
}

const confirmSubmit = async params => {
	try {
		const result = await dangerDispose(params)
		if (result?.succ) {
			Dialog.alert({
				message: '提交成功',
			}).then(() => {
				router.back()
			})
		}
	} catch (e) {
	}
}

onMounted(() => {
	getDetail()
})
</script>

<style scoped lang="less">
.trouble-dispose {
	height: 100%;
	h3 {
		padding: 20px 0 12px 0;
		position: relative;
		text-indent: 10px;
		margin: 0 32px;
		&:before {
			position: absolute;
			content: '';
			height: 30px;
			top: 44px;
			transform: translateY(-50%);
			width: 6px;
			border-radius: 3px;
			left: 0px;
			background: var(--van-primary-color);
		}
	}

	.images {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		:deep(.van-image) {
			width: calc(calc(100% - 96px) / 5);
			aspect-ratio: 1;
			border-radius: 8px;
			margin: 24px 24px 0 0;
			overflow: hidden;
			&:nth-of-type(5n) {
				margin-right: 0;
			}
			&:nth-of-type(-n+5) {
				margin-top: 0;
			}
		}
	}
}
</style>
